<template>
	<view class="wrapper" :style="{padding:`calc(270rpx + ${safeTop}px) 0 0`}">
		<!-- 顶部类型 -->
		<div class="posf">
			<div class="header  flex-start" :style="{padding:`calc(15rpx + ${safeTop}px) 35rpx 55rpx`}"
				@click="show=true">
				<div class="f32 cfff fbold mr10">{{orderType || '全部'}}订单</div>
				<div class="down-icon">
					<u-icon name="arrow-down-fill" color="#FFF" size="18"></u-icon>
				</div>
			</div>
			<div class="nav-bar">
				<div class="keyword flex-start bfff">
					<u-icon name="search" color="#999999" size="20"></u-icon>
					<input type="text" placeholder="输入关键词" placeholder-class="c999 f26" class="ml15" v-model="keyWords"
						@confirm="setNav(state)" />
				</div>
				<div class="main space-around f30">
					<div class="posr" :class="state===''?'active':''" @click="setNav('')">
						全部
					</div>
					<div class="posr" :class="state===0?'active':''" @click="setNav(0)">待付款</div>
					<div class="posr" :class="state==1?'active':''" @click="setNav(1)">待发货</div>
					<div class="posr" :class="state==2?'active':''" @click="setNav(2)">已发货</div>
					<div class="posr" :class="state=='4,5'?'active':''" @click="setNav('4,5')">退款/售后</div>
				</div>
			</div>
		</div>
		<div v-for="(v,i) in list" :key="i">
			<!-- 商城列表 -->
			<shangCheng v-if="v.orderType=='商城'" :v="v" @reset="setorderType(orderType)"></shangCheng>
			<!-- 列表 -->
			<div class="goods-box bfff" v-else @click="openPage('./xiangXi?orderNo='+ v.orderNo)">
				<div v-for="item in v.goodsList">
					<div class="center">
						<div class="f32 flex1 ml10 nowrap">{{item.goodsName}}</div>
						<div class="f24 mr10">{{getstate(v.state)}}</div>
					</div>
					<div class="goodsPoint center mt40 mb10">
						<image :src="item.goodsImg" mode="aspectFill" class="logo-icon mr25 ml10"></image>
						<div class="flex1 ">
							<div class="f22 c999 mb20">下单时间：{{v.createTime}}</div>
							<!-- <div class="center ctheme order f18">免预约</div> -->
						</div>
						<div class="f22 c999 ml50 text2 mr10">实付：{{v.payAmount}}积分</div>
					</div>
				</div>
				<div class="flex-end f24">
					<div class="btn-white mr20 center" @click.stop="goList">再来一单</div>
					<!-- <div class="cfff btn-pay center" >去使用</div> -->
					<div class="btn-white mr20 center" v-if="v.state>=5" @click.stop="godelete(v,i)">删除订单</div>
					<div class="btn-white mr20 center" v-if="v.state==1" @click.stop="applyRefund(v)">申请退款</div>
					<div class="btn-white mr20 center" v-if="v.state==0" @click.stop="gocancel(v)">取消订单</div>
					<!-- <div class="f24 cfff btn-pay center" v-if="v.state==0">付款</div> -->
				</div>
			</div>
		</div>

		<div class="c999 mt50 tCenter mb50">没有更多了</div>
		<!-- 类型弹出层 -->
		<u-popup :safeAreaInsetTop="false" mode="top" round="13" :show="show" @close="close" @open="open">
			<!-- :style="{padding:`calc(70rpx + ${safeTop}px) 0 0`}" -->
			<view>
				<div class="header  flex-start" :style="{padding:`calc(15rpx + ${safeTop}px) 35rpx 25rpx`}"
					@click="show=false">
					<div class="f32 cfff fbold mr10">{{orderType || '全部'}}订单</div>
					<div class="down-icon">
						<u-icon name="arrow-down-fill" color="#FFF" size="18"></u-icon>
					</div>
				</div>
				<div class="bfff f26 nav-main">
					<div class="nav center " :class="orderType==''?'ctheme':''" @click="setorderType('')">全部</div>
					<div class="fbold f30 mt40 mb40">票券</div>
					<div class="flex-start">
						<div class="nav center mr20" :class="orderType=='视听会员'?'ctheme':''"
							@click="setorderType('视听会员')">
							视听会员</div>
						<div class="nav center " :class="orderType=='本地生活'?'ctheme':''" @click="setorderType('本地生活')">
							本地生活</div>
						<!-- <div class="nav center " :class="orderType=='其它'?'ctheme':''" @click="setorderType('其它')">其它
						</div> -->
					</div>
					<div class="fbold f30 mt40 mb40">其他</div>
					<div class="space-between">
						<div class="nav center " :class="orderType=='商城'?'ctheme':''" @click="setorderType('商城')">
							商城</div>
					</div>
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import shangCheng from './components/shangCheng'
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		getCurrentInstance
	} from 'vue'
	const pageNum = ref(1)
	const pageSize = ref(10)
	const {
		proxy
	} = getCurrentInstance()
	// 取消订单
	const gocancel = (v) => {
		uni.showModal({
			title: '确认取消订单吗?',
			success: res => {
				if (res.confirm) {
					proxy.$http('/api/mall/order/cancel', {
						phone: uni.getStorageSync('uInfo').phone,
						orderNo: v.orderNo
					}, true, 'POST').then((r) => {
						uni.showToast({
							title: '订单已取消'
						})
						v.state = 6
					})
				}
			}
		})
	}
	// 删除订单
	const godelete = (v, i) => {
		uni.showModal({
			title: '确认删除订单吗?',
			success: res => {
				if (res.confirm) {
					proxy.$http('/api/mall/order/delete', {
						phone: uni.getStorageSync('uInfo').phone,
						orderNo: v.orderNo
					}, true, 'POST').then((r) => {
						uni.showToast({
							title: '订单已删除'
						})
						list.value.splice(i, 1)
					})
				}
			}
		})
	}
	// 申请退款
	const applyRefund = (v) => {
		uni.showModal({
			title: '请输入退款原因',
			editable: true,
			placeholderText: '请输入',
			success: res => {
				console.log(res)
				if (res.confirm) {
					if (res.content == '') {
						uni.showToast({
							title: '请输入退款原因',
							icon: 'none'
						})
						return
					}
					proxy.$http('/api/mall/order/applyRefund', {
						phone: uni.getStorageSync('uInfo').phone,
						orderNo: v.orderNo,
						tkyy: res.content
					}, true, 'POST').then((r) => {
						uni.showToast({
							title: '退款成功！'
						})
						v.state = 4
					})
				}

			}
		});
	}


	// 获取状态
	const getstate = (s) => {
		if (s == 1) {
			return '待发货'
		} else if (s == 2) {
			return '已发货'
		} else if (s == 4) {
			return '退款'
		} else if (s == 5) {
			return '售后'
		} else if (s == 6) {
			return '已取消'
		} else if (s == 7) {
			return '交易完成'
		} else if (s == 0) {
			return '待支付'
		} else {
			return '其他'
		}

	}

	// 再来一单跳转
	const goList = () => {
		uni.switchTab({
			url: '../benDi/benDi'
		})
	}



	const list = ref([])
	const getorders = () => {
		proxy.$http('/api/mall/orders', {
			phone: uni.getStorageSync('uInfo').phone,
			orderType: orderType.value,
			keyWords: keyWords.value,
			state: state.value,
			pageNum: pageNum.value,
			pageSize: pageSize.value
		}).then((r) => {
			console.log(r)
			list.value = list.value.concat(r.data)
		})
	}
	onShow(() => {
		setorderType(orderType.value)
	})
	// 顶部分类相关
	const orderType = ref('')
	const setorderType = (type) => {
		orderType.value = type
		pageNum.value = 1
		list.value = []
		show.value = false
		getorders()
	}

	// 订单关键字
	const keyWords = ref('')

	// 订单状态
	const state = ref('')

	function setNav(index) {
		state.value = index
		pageNum.value = 1
		list.value = []
		getorders()
	}

	// 顶部弹窗
	const show = ref(false)

	function open() {
		// console.log('open');
	}

	function close() {
		show.value = false
		// console.log('close');
	}
</script>

<style lang="scss" scoped>
	.nav-main {
		padding: 50rpx 36rpx 120rpx;
		border-radius: 0 0 13rpx 13rpx;

		.nav {
			width: 213rpx;
			height: 63rpx;
			background: #F5F5F5;
			border-radius: 13rpx;
		}

		.ctheme {
			border: 1rpx solid #FF5555;
			background-color: #FFEEF1;
		}
	}

	.disabled {
		cursor: no-drop;
		pointer-events: none;
		opacity: 0.6;
	}

	.text3 {
		margin-top: -33rpx;
	}

	.btn-white {
		width: 207rpx;
		height: 60rpx;
		border-radius: 28rpx;
		border: 1rpx solid #333333;
	}

	.goods-box {
		width: 705rpx;
		margin: 0 auto 20rpx;
		padding: 25rpx 20rpx 15rpx;
		border-radius: 13rpx;

		.text1 {
			color: #FF5523;
		}

		.down-icon {
			width: 26rpx;
			height: 26rpx;
		}

		.btn-pay {
			width: 207rpx;
			height: 60rpx;
			background: linear-gradient(to left, #FF8901, #FF5325);
			border-radius: 28rpx 28rpx 28rpx 28rpx;
		}

		.goodsPoint {
			.logo-icon {
				width: 95rpx;
				height: 95rpx;
				border-radius: 7rpx;
			}

			.order {
				width: 75rpx;
				height: 30rpx;
				border-radius: 7rpx 7rpx 7rpx 7rpx;
				border: 1rpx solid #FF5555;
			}

			.text2 {
				margin-top: -50rpx;
			}

		}
	}

	.nav-bar {
		width: 100%;
		background: linear-gradient(to bottom, #FEDAEB, #FDFAFB);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 25rpx 25rpx 0;
		margin-top: -33rpx;
		box-shadow: 0rpx -4rpx 6rpx 0 #FF5859;

		.keyword {
			padding-left: 20rpx;
			width: 675rpx;
			height: 50rpx;
			box-shadow: 0rpx 0rpx 16rpx 2rpx #FDCBE0;
			border-radius: 25rpx 25rpx 25rpx 25rpx;
			margin: 0 auto;
		}

		.main {
			height: 90rpx;

			.active {
				color: #FF5555;
				font-weight: 800;

				&::after {
					content: '';
					position: absolute;
					left: calc(50% - 60rpx);
					bottom: -30rpx;
					background-color: #FD7D7E;
					width: 120rpx;
					height: 8rpx;
					border-radius: 35rpx 35rpx 0 0;
				}
			}
		}
	}

	.posf {
		top: 0;
		left: 0;
		z-index: 5;
		width: 100%;
	}

	.header {
		padding-left: 30rpx;
		padding-bottom: 55rpx;
		background: linear-gradient(to left, #F857A5, #FF5858);


		.down-icon {
			margin-top: 10rpx;
		}
	}
</style>